<template>
	<div class="app-header-sticky" :class="{show: y>=78}">
		<div class="container">
			<router-link to="/" class="logo"></router-link>
			<AppHeaderNav></AppHeaderNav>
			<div class="right">
				<router-link to="/">品牌</router-link>
				<router-link to="/">专题</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	import AppHeaderNav from './app-header-nav'
	import {
		useWindowScroll
	} from '@vueuse/core'

	export default {
		components: {
			AppHeaderNav
		},

		setup() {
			const {
				y
			} = useWindowScroll()

			return {
				y
			}
		}
	}
</script>

<style lang="less" scoped>
	.app-header-sticky {
		width: 100%;
		height: 80px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		background-color: #fff;
		border-bottom: 1px solid #e4e4e4;

		transform: translateY(-100%);
		opacity: 0;

		&.show {
			transition: all .3s linear;
			transform: none;
			opacity: 1;
		}

		.container {
			display: flex;
			align-items: center;
		}

		.logo {
			width: 200px;
			height: 80px;
			background: url(../assets/images/logo.png) no-repeat right 2px;
			background-size: 160px auto;
		}

		.right {
			width: 220px;
			display: flex;
			text-align: center;
			padding-left: 40px;
			border-left: 2px solid @xtxColor;

			a {
				width: 38px;
				margin-right: 40px;
				font-size: 16px;
				line-height: 1;

				&:hover {
					color: @xtxColor;
				}
			}
		}
	}
</style>
